<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易版手风琴</title>
		<link rel="stylesheet" href="./css/reset.css">
	</head>
	<body>
		<style>
			/* 请根据结构实现相应css功能,先实现鼠标悬停显示对应图片,再提供过渡效果 */
			ul{
				width: 300px;
			}
			li{
				height: 36px;
				border: 1px solid #808080;
				border-radius: 5px;	
				background-color: #cee8ff;
				transition: height 0.3s;
			}
			h3{
				font-size: 18px; 
				line-height: 36px;
				padding-left: 10px;
			}
			#sg,#ss,#ll{
				height: 0;
				transition: height 0.3s;
				overflow: hidden;
			}
			img{
				width: 100%;
			}
			 li:hover #sg,
			 li:hover #ss,
			 li:hover #ll{
				height: 100%;
			}  
			li:hover{
				height: 175px;
				overflow: hidden;
			}  

		</style>
		<ul>
			<li>
				<h3>上官婉儿</h3>
				<div id="sg"><img src="img/婉儿.jpg"/></div>
			</li>
			<li>
				<h3>孙尚香</h3>
				<div id="ss"><img src="img/大小姐.jpg"/></div>
			</li>
			<li>
				<h3>兰陵王</h3>
				<div id="ll"><img src="img/兰陵王.jpg"/></div>
			</li>
		</ul>

	</body>
</html>
